<template>
	<div class="goods">
<!--		<div class="search-box">
			<search class="search-dom"></search>
		</div>-->
		<div class="nav-subs">
			<div class="nav-sub-bgs"></div>
			<div class="nav-sub-wrappers">
				<div class="w">
					<ul class="nav-lists">
						<li>
							<router-link to="/">
								<a>首页</a>
							</router-link>
						</li>
						<li>
							<router-link to="/leveling">
								<a class="active">游戏代练</a>
							</router-link>
						</li>
					</ul>
				</div>
			</div>
		</div>
		<!---------------  查询条件 ---------------------->
		<div class="m-condition-box">
			<div class="w-row">
				<div class="w-col-title">游戏类型：</div>
				<div class="w-col-value">
					<span :class="curCheckedGameId == item.id ? 'current':''" v-for="(item,i) in gameList" @click="checkedGame(item)">{{item.name}}</span>
				</div>
			</div>
			<div class="w-row">
				<div class="w-col-title">游戏区服：</div>
				<div class="w-col-value">
					<span :class="curCheckedGroupId == obj.id ?'current':''" v-for="(obj,j) in groupList" @click="checkedGroup(obj)">{{obj.name}}</span>
				</div>
			</div>
			<div class="w-row">
				<div class="w-col-title">价格区间：</div>
				<div class="w-col-value">
					<span :class="priceIndex == -1 ? 'current':''" @click="checkedPrice('',-1)">全部</span>
					<span :class="priceIndex == k ? 'current':''" v-for="(arr ,k) in priceRange" :key="k" @click="checkedPrice(arr,k)">{{arr.priceSectionStart}}{{arr.priceSectionEnd == '+' ? '元以上':'-' +arr.priceSectionEnd+'元'}}</span>
				</div>
			</div>
		</div>
		<!------------------  排序条件  --------------------->
		<div class="m-sort-box">
			<el-row class="w-row">
				<el-col :span="3">
					<div class="col-sort current">
						综合排序
					</div>
				</el-col>
				<el-col :span="3">
					<div class="col-sort" @click="sortByPrice">
						价格<span>{{priceSortFlag}}</span>
					</div>
				</el-col>
				<!--<el-col :span="3">
					<div class="col-sort" @click="sortByTime">
						时间<span>{{timeSortFlag}}</span>
					</div>
				</el-col>-->
				<el-col :span="3">
					<div class="col-sort"></div>
				</el-col>
				<el-col :span="3">
					<div class="col-sort"></div>
				</el-col>
				<el-col :span="3">
					<div class="col-sort"></div>
				</el-col>
				<el-col :span="6">
					<div class="col-sort"></div>
				</el-col>
				<el-col :span="3">
					<div class="col-sort">
            <span class="cate-item yticon icon-fenlei1"  v-if="current == 0" @click="toShowMode('false')">
              <img src="../../../static/images/ico/apps.png" alt="">
            </span>
           <span class="cate-item cgicon icon-vertical" v-else-if="current == 1" @click="toShowMode('true')">
               <img src="../../../static/images/ico/sort.png" alt="">
           </span>
          </div>
				</el-col>
			</el-row>
		</div>

		<div v-loading="loading" element-loading-text="无忧账号加载中..." style="min-height: 35vw;">
			<div class="img-item" v-if="!noResult">
        <div v-show="current === 0">
				<!--商品-->
				<div class="goods-box w">
					<div class="goods-title-box">
						<el-row :gutter="20">
							<el-col :span="16">
								<div class="grid-content">商品标题</div>
							</el-col>
							<el-col :span="4">
								<div class="grid-content">价格</div>
							</el-col>
							<el-col :span="4">
								<div class="grid-content">查看详情</div>
							</el-col>
						</el-row>
					</div>
					<div class="goods-list-box">
						<el-row :gutter="20" class="g-row-item" v-for="(item,i) in goods" :key="i">
							<el-col :span="16">
								<div class="grid-content c-goods-info">
									<div class="goods-img">
										<img :src="item.pic"/>
									</div>
									<div class="goods-info">
										<p class="goods-name" :title="item.name" @click="linkToGoodsDetails(item.id)">{{item.name}}</p>
										<table>
											<tr>
												<td class="goods-info-title">游戏类型：</td>
												<td class="goods-info-value">{{item.productCategoryName}}</td>
											</tr>
											<tr>
												<td class="goods-info-title">游戏大区：</td>
												<td>{{item.gameGroup}}</td>
											</tr>
											<tr>
												<td class="goods-info-title">游戏区服：</td>
												<td>{{item.gameServer}}</td>
											</tr>
											<!--<tr>
												<td class="goods-info-title">上架时间：</td>
												<td>{{item.createTime}}</td>
											</tr>-->
										</table>
									</div>
								</div>
							</el-col>
							<el-col :span="4">
								<div class="grid-content">
									<em>¥</em><span class="goods-price">{{Number(item.price).toFixed(2)}}</span>
								</div>
							</el-col>
							<el-col :span="4">
								<div class="grid-content">
									<button class="btn-details" @click="linkToGoodsDetails(item.id)">查看详情</button>
								</div>
							</el-col>
						</el-row>
					</div>
				</div>
<!--				&lt;!&ndash;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;分页-&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&#45;&ndash;&gt;-->
<!--				<el-pagination v-if="!noResult&&!error"-->
<!--					@size-change="handleSizeChange"-->
<!--					@current-change="handleCurrentChange"-->
<!--					:current-page="currentPage"-->
<!--					:page-sizes="[8, 20, 40, 80]"-->
<!--					:page-size="pageSize"-->
<!--					 layout="total, sizes, prev, pager, next, jumper"-->
<!--					 :total="total">-->
<!--				</el-pagination>-->
			</div>
         <!--       // 4个一行展示商品-->
      <div class="m-type-content" v-show="current === 1">
        <el-row>
          <el-col :span="6" v-for="(iitem,k) in goods" :key="k">
            <mall-goods :msg="iitem"></mall-goods>
          </el-col>
        </el-row>
      </div>
        <!------------分页------------------->
        <el-pagination v-if="!noResult&&!error"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[8, 20, 40, 80]"
                       :page-size="pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </div>
			<div class="no-info" v-if="noResult">
				<div class="no-data">
					<img src="/static/images/no-search.png">
					<br> 抱歉！暂时还没有商品
				</div>
			</div>
			<div class="no-info" v-if="error">
				<div class="no-data">
					<img src="/static/images/error.png">
					<br> 抱歉！出错了...
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	import { mapMutations, mapState } from 'vuex'
	import { getAllLevelingGoods } from '/api/goods.js'
	import { listLevelingGame ,listLevelingGameById} from '/api/index.js'
	import mallGoods from '/components/levelingGoods'
	import YButton from '/components/YButton'
	import YShelf from '/components/shelf'
	import search from '/components/searchBox'
//	import { currency } from '/api/utils'
	const CONST_XPSJ = "新品上架";
	const CONST_RQTJ = "人气推荐";
	const CONST_SSNR = "搜索内容";
	export default {
    metaInfo: {
      title: '无忧账号-游戏代练-账号交易首选无忧-账号找回永久包赔-所售账号不转手永久包赔', // set a title
      meta: [{                 // set meta
        name: 'keywords',
        content: '5u，5u账号，5u258，5u游戏，游戏账号交易，无忧账号，游戏帐号交易平台,5u258交易平台，5u258官网，王者荣耀，CF枪战之王，火影忍者，QQ飞车手游，和平精英，穿越火线，英雄联盟，逆战，霸气玩，租号玩，买卖账号'
      },{                 // set meta
        name: 'description',
        content: '无忧账号,是国内专业安全的游戏帐号交易平台，账号找回永久包赔，所售账号不转手永久包赔。玩家可以通过极其优惠的价格购买王者荣耀，CF枪战之王，火影忍者，QQ飞车手游，和平精英，穿越火线，英雄联盟，逆战等游戏的极品号。'
      }]
    },
		data() {
			return {
				goods: [],
				noResult: false,
				error: false,
				loading: true,
				sortType: 1,
				windowHeight: null,
				windowWidth: null,
				sort: 'price asc',
				currentPage: 1,
				total: 0,
				pageSize: 20,
				gameList:[],
				groupList:[],
				curCheckedGameId:0,
				curCheckedGroupId:0,
				tempData:[],
				tempParamObj:{},	//查询条件临时存储
				priceSortFlag:'',
//				timeSortFlag:'▼',
				priceSort:0	,	//0:无排序 ，1：升序  2：降序
//				timeSort:2,		//0:无排序 ，1：升序  2：降序(后台默认是降序)
				sortAsc:'',
				sortDesc:'',
				priceRange:[{priceSectionStart:0, priceSectionEnd:500},
							{priceSectionStart:500, priceSectionEnd:1000},
							{priceSectionStart:1000, priceSectionEnd:3000},
							{priceSectionStart:3000, priceSectionEnd:5000},
							{priceSectionStart:5000, priceSectionEnd:10000},
							{priceSectionStart:10000, priceSectionEnd:'+'}],
				priceIndex:-1,
				curPriceRange:'',
        current:1
			}
		},
		methods: {
			...mapMutations(['CHANGE_NAV']),
			handleSizeChange(val) {
				let paramObj = this.tempParamObj;
				this.pageSize = val;
				this._getAllGoods(paramObj);
				this.loading = true
			},
			handleCurrentChange(val) {
				let paramObj = this.tempParamObj;
				this.currentPage = val;
				this._getAllGoods(paramObj);
				this.loading = true
			},
			getListGame(paramObj) { 		//获取全部游戏类型
				listLevelingGame().then(res => {
					if(res.code === 200) {
						this.error = false;
					} else {
						this.error = true;
					}
					var _tempList = [{id:0,name:'全部'}];
					var data = res.data;
					var isUnshift = true;
					for(var i = 0; i < data.length; i++) {
						var groupObj = data[i];
						try {
							var _groupData = JSON.parse(groupObj.groupData);
							for(var j = 0; j < _groupData.length; j++) {
								_tempList.push(_groupData[j]);
							}
						} catch(e) {
							console.error(e);
							this.error = true;
						}
					}
					//paramObj为空表示刷新页面操作，否则是输入条件查询
					var arr = Object.keys(paramObj);
					if(arr.length > 0){
						var key = paramObj.id;
						for (var i = 0; i < _tempList.length; i++) {
						    if (_tempList[i].id === key) {
							    _tempList.splice(i, 1);
							    break;
						    }
						}
						//searchValue等于undefined表示刷新页面或从其他页面点击链接进入当前页面
						if(paramObj.searchValue == undefined){
							//TODO 预留
						}else{
							//通过搜索进入当前页面，增加游戏类型 搜索内容
							if(paramObj.searchValue !== ""){
								paramObj.id = -1;
								paramObj.name = CONST_SSNR+"："+paramObj.searchValue;
							}else{
								if(paramObj.searchValue == "" && paramObj.name == ""){
									isUnshift = false;
								}
							}
						}
						//根据查询条件选中游戏分类
						_tempList = this.addCurClass(paramObj,_tempList);
						//新品上架查询
						if(paramObj.navHotProductMore){
							paramObj.id = -2;
							paramObj.name = CONST_RQTJ;
						}
						//人气推荐查询
						if(paramObj.newproductMore){
							paramObj.id = -3;
							paramObj.name = CONST_XPSJ;
						}
						//将路由传人的游戏放在展示的第一位
						if(isUnshift){
							_tempList.unshift(paramObj);
						}
					}else{
						paramObj = {};
						paramObj.gameId = _tempList[1]["id"];
						//根据查询条件选中游戏分类
						_tempList = this.addCurClass(paramObj,_tempList);
					}
					this.gameList = _tempList;
					//根据当前选中的游戏获取大区信息
					this.getGroupById(paramObj);
				}).catch((e) => {
					console.log(e)
				});
			},
			getGroupById(param) {			//根据游戏id获取游戏区服
				var gameId = param.id ? param.id : param.gameId;
				var groupId = param.groupId;
				var gameServerId = param.gameServer;
				var gameName = param.searchValue;
				var priceSectionStart = param.priceSectionStart;
				var priceSectionEnd = param.priceSectionEnd;
				listLevelingGameById({gameId:gameId}).then(res => {
					if(res.success === false) {
						this.error = true
						return;
					}
					let data = [{id:0,name:"全部"}];
					for(var i = 0; i < res.data.length; i++){
						data.push(res.data[i]);
					};
					this.groupList = data;
					//默认查询，查询当前条件下的商品数据
					var pObj = {};
					if(gameId == 0){
						gameId = "";
						pObj.type = "all";
					}else if(gameId == -1){			//对搜索内容增加type字段，供后面临时存储搜索内容使用
						gameId = "";
						pObj.type = "search";
					}else if(gameId == -2){		//
						gameId = "";
						pObj.type = "navHotProduct";
					}else if(gameId == -3){
						gameId = "";
						pObj.type = "newproduct";
					}
					pObj.productCategoryId = gameId ? gameId : "";
					pObj.gameGroupId = groupId ? groupId:"";
					pObj.name = gameName ? gameName : "";
					pObj.gameServerId = gameServerId ? gameServerId : "";
					if(priceSectionEnd){
						pObj.priceSectionStart = priceSectionStart;
					}
					if(priceSectionEnd){
						pObj.priceSectionEnd = priceSectionEnd;
					}
					if(param.newproductMore){
						pObj.newProduct = param.newproductMore;
					}
					if(param.navHotProductMore){
						pObj.hotProduct = param.navHotProductMore;
					}
					if(data.length > 0){
						if(groupId){		//如果传游戏区服则直接查询区服下数据，否则默认取第一个区服的数据
							this.curCheckedGroupId = groupId;
							pObj.gameGroupId = groupId;
						}else{
							//如果当前游戏有区服就将区服临时存放
							this.curCheckedGroupId = 0;
							pObj.gameGroupId = "";
						}
					}
					this._getAllGoods(pObj);
				}).catch((e) => {
			      	 console.log(e)
				 });
			},
			_getAllGoods(pmsProduct) {
				var isSearch = pmsProduct.type == "search";
				var paramsObj = {
					pageNum : this.currentPage,
					pageSize : this.pageSize
				}
				delete pmsProduct.type;
				if(pmsProduct){
					paramsObj.pmsProduct = JSON.stringify(pmsProduct);
				}
				//每一次重新查询都临时保存查询条件
				this.tempParamObj = pmsProduct;
        getAllLevelingGoods(paramsObj).then(res => {
					if(res.code === 200) {
						var _data = JSON.parse(res.data);
						this.total = _data.total
						this.goods = _data.records
						this.noResult = false
						if(this.total === 0) {
							this.noResult = true;
						}
						if(isSearch){
							this.tempData = _data.records;
						}
						this.error = false;
					} else {
						this.error = true;
					}
					this.loading = false;;
				}).catch((e) => {
					console.log(e)
				});
			},
			// 价格排序
			sortByPrice() {
				let _priceSort = this.priceSort;
				let paramObj = this.tempParamObj;
				if(_priceSort == 0){
					this.priceSort = 1;
					this.priceSortFlag = "▲";
					this.sortAsc = this.sortAsc == '' ? "price" : this.sortAsc+",price";
					this.sortDesc = this.sortDesc.replace(",price","").replace("price","");
				}else if(_priceSort == 1){
					this.priceSort = 2;
					this.priceSortFlag = "▼";
					this.sortDesc = this.sortDesc == '' ? "price" : this.sortAsc+",price";
					//清空升序字段
					this.sortAsc = this.sortAsc.replace(",price","").replace("price","");
				}else if(_priceSort == 2){
					this.priceSort = 0;
					this.priceSortFlag = "";
					this.sortDesc = this.sortDesc.replace(",price","").replace("price","");
					this.sortAsc = this.sortAsc.replace(",price","").replace("price","");
				}
				this.currentPage = 1;
				this.loading = true;
				paramObj.sortDesc = this.sortDesc;
				paramObj.sortAsc = this.sortAsc;
				this._getAllGoods(paramObj);
			},
      // 列表结构显示
      toShowMode(mode) {
        if (this.current == 0) {
          this.current = 1;
        } else {
          this.current = 0;
        }
      },
//			sortByTime(){		//时间排序
//				let _timeSort = this.timeSort;
//				let paramObj = this.tempParamObj;
//				if(_timeSort == 0){
//					this.timeSort = 1;
//					this.timeSortFlag = "▲";
//					this.sortAsc = this.sortAsc == '' ? "createTime" : this.sortAsc+",createTime";
//					this.sortDesc = this.sortDesc.replace(",createTime","").replace("createTime","");
//				}else if(_timeSort == 1){
//					this.timeSort = 2;
//					this.timeSortFlag = "▼";
//					this.sortDesc = this.sortDesc =='' ? "createTime" : this.sortDesc+",createTime";
//					//清空升序字段
//					this.sortAsc = this.sortAsc.replace(",createTime","").replace("createTime","");
//				}else if(_timeSort == 2){
//					this.timeSort = 0;
//					this.timeSortFlag = "";
//					this.sortDesc = this.sortDesc.replace(",createTime","").replace("createTime","");
//					this.sortAsc = this.sortAsc.replace(",createTime","").replace("createTime","");
//				}
//				this.currentPage = 1;
//				this.loading = true;
//				paramObj.sortDesc = this.sortDesc;
//				paramObj.sortAsc = this.sortAsc;
//				this._getAllGoods(paramObj)
//			},
			checkedGame(obj){			//切换游戏
			if(obj.id == -1){		//点击"搜索"内容游戏类型
					this.curCheckedGameId = -1;
					this.goods = this.tempData;
				}else{
					//查询选中游戏对应的数据
					this.curCheckedGameId = obj.id;
					var param = {
						gameId:obj.id
					};
					if(this.curPriceRange){
						param.priceSectionStart = this.curPriceRange.priceSectionStart;
						param.priceSectionEnd = this.curPriceRange.priceSectionEnd;
					}
					this.getGroupById(param);
				}
			},
			checkedGroup(obj){
				this.curCheckedGroupId = obj.id;
				var param = {
					gameId:this.curCheckedGameId,
					groupId:obj.id
				};
				if(this.curPriceRange){
					param.priceSectionStart = this.curPriceRange.priceSectionStart;
					param.priceSectionEnd = this.curPriceRange.priceSectionEnd;
				}
				this.getGroupById(param);
			},
			checkedPrice(obj,priceIndex){
				this.priceIndex = priceIndex;
				let paramObj = this.tempParamObj;
				this.curPriceRange = obj;
				if(obj){
					var price =  obj.priceSectionEnd;
					//价格是数字
					if(typeof price === 'number' && !isNaN(price)){

					}else{
						price = price.indexOf("+") > -1 ? "" : price;
					}
					paramObj.priceSectionStart = obj.priceSectionStart;
					paramObj.priceSectionEnd = price;
				}else{
					paramObj.priceSectionStart = '';
					paramObj.priceSectionEnd = '';
				}
				this._getAllGoods(paramObj)
			},
			addCurClass(paramObj,tempList){			//添加选中样式
				var _tempList = tempList;
				if(paramObj.searchValue == ""){
					//输入内容为空，选中游戏不为空
					if(paramObj.name !== "" && paramObj.name !== undefined){
						this.curCheckedGameId = paramObj.id;
					}else{		//输入内容为空
						this.curCheckedGameId = _tempList[0]["id"];
					}
				}else{
					if(paramObj.searchValue){
						this.curCheckedGameId = _tempList[0]["id"];
					}else{
						this.curCheckedGameId = _tempList[1]["id"];
					}
					//输入内容不为空且选中游戏不为空
					if(paramObj.name !== "" && paramObj.name !== undefined){
						this.curCheckedGameId = paramObj.id;
					}
				}
				return _tempList;
			},
			linkToGoodsDetails(goodsId){
				 window.open('//' + window.location.host + '/levelingItem?id=' + goodsId);
			}
		},
		created() {},
		computed: {
			...mapState(['navIndex'])
		},
		mounted() {
			this.CHANGE_NAV(2);
			//获取路由参数
			var paramObj = this.$route.params.paramObj;
			this.windowHeight = window.innerHeight;
			this.windowWidth = window.innerWidth;
			var newproductMore = this.$route.params.newproductMore;
			var navHotProductMore = this.$route.params.navHotProductMore;
			if(paramObj == undefined || paramObj == ""){
				paramObj = {};
			}
			if(newproductMore){
				paramObj.newproductMore = true;
			}else if(navHotProductMore){
				paramObj.navHotProductMore = true;
			}
			this.getListGame(paramObj);
		},
		filters: {
//			currency: currency
		},
		components: {
			mallGoods,
			YButton,
			YShelf,
			search
		}
	}
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
	@import "../../assets/style/mixin";
	@import "../../assets/style/theme";
	.goods {
		clear: both;
		width: 1100px;
		min-height: 600px;
		padding: 0 0 25px;
		margin: 20px auto;
	}

	.search-box {
		width: 100%;
		height: 90px;
		position: relative;
		margin-top: 30px;
	}

	.search-dom {
		position: relative;
		width: 80%;
		float: right;
		right: 0;
	}

	.nav-subs {
		position: relative;
		z-index: 20;
		height: 60px;
		background: #f7f7f7;
		box-shadow: 0 2px 4px rgba(0, 0, 0, .04);
		.nav-sub-wrappers {
			padding: 20px 0;
			height: 50px;
			position: relative;
		}
		.w {
			display: flex;
			justify-content: space-between;
		}
		.nav-lists {
			height: 28px;
			line-height: 28px;
			display: flex;
			align-items: center;
			height: 100%;
			li:first-child {
				padding-left: 0;
				a {
					padding-left: 10px;
				}
			}
			li {
				position: relative;
				float: left;
				padding-left: 2px;
				a {
					display: block;
					// cursor: default;
					padding: 0 10px;
					color: #666;
					&.active {
						font-weight: bold;
						color: #FF8700;
					}
				}
				a:hover {
					color: #FF8700;
				}
			}
			li:before {
				content: ' ';
				position: absolute;
				left: 0;
				top: 13px;
				width: 2px;
				height: 2px;
				background: #bdbdbd;
			}
		}
	}

	.m-condition-box {
		margin-top: 20px;
		border: 1px solid #e0e0e0;
		background-color: white;
	}

	.m-sort-box {
		margin-top: 30px;
		border: 1px solid #e0e0e0;
		background-color: white;
	}
	.w-row {
		position: relative;
		width: 100%;
		min-height: 60px;
		display: flex;
		flex-direction: row;
		border-bottom: 1px solid #e0e0e0;
	}

	.w-col-title {
		width: 130px;
		text-align: right;
		padding: 20px 10px;
		border-right: 1px solid #e0e0e0;
	}

	.w-col-value {
		position: relative;
		width: calc(100% - 130px);
		padding: 10px 10px 0 10px;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.w-col-value span {
		height: 80%;
		padding: 10px;
		display: inline-block;
		border-radius: 5px;
		cursor: pointer;
		margin: 0 5px;
	}

	.w-col-value span:hover {
		color: white;
		background-color: #FF8700;
	}

	.col-sort {
		padding-top: 20px;
		text-align: center;
		height: 100%;
		cursor: pointer;
	}
	.col-sort span{
		font-weight: bold;
		margin-left: 10px;
		color: #000000;
	}
	.current {
		color: white;
		background-color: #FF8700;
	}

	.goods-box {
		width: 100%;
	}

	.no-info {
		padding: 100px 0;
		text-align: center;
		font-size: 30px;
		display: flex;
		flex-direction: column;
		.no-data {
			align-self: center;
		}
	}
	.btn-details{
		width: 120px;
		height: 45px;
		background-color: #FF8700;
		color: white;
		border-radius: 5px;
		cursor: pointer;
		margin-top: 40px;
	}

	.goods-title-box {
		height: 60px;
		line-height: 60px;
		margin-top: 1px;
		background-color: white;
		border: 1px solid #e0e0e0;
	}
	.goods-list-box{
		border-left: 1px solid #e0e0e0;
		border-right: 1px solid #e0e0e0;
		border-bottom: 1px solid #e0e0e0;
		background-color: white;
	}
	.g-row-item{
		padding: 25px 20px;
		height: 200px;
	}

	.grid-content {
		text-align: center;
	}
	.c-goods-info{
		display: flex;
	}
	.goods-img{
		width: 140px;
		height: 140px;
		display: inline-block;
	}
	.goods-img img{
		width: 100%;
		height: 100%;
		border-radius: 10px;
	}
	.goods-info{
		width: calc(100% - 120px);
		height: 100%;
	}
	.goods-name{
		width: 100%;
	    height: 45px;
	    text-align: left;
	    padding: 5px 20px;
	    font-weight: bold;
	    color: red;
	    cursor: pointer;
	    overflow: hidden;
	    text-overflow: ellipsis;
	    margin-top: -5px;
	}
	.goods-info-title{
		width: 100px;
		padding: 3px 15px;
		color: #999999;
	}
	.goods-price{
		color: red;
		font-size: 16px;
		font-weight: bold;
		margin-left: 5px;
		margin-top: 50px;
	}

	.img-item {
		display: flex;
		flex-direction: column;
	}

	.el-pagination {
		align-self: flex-end;
		margin: 3vw 10vw 2vw;
	}
	.g-row-item:hover{
		background-color: #fdf6ee;
	}


	@media (max-width: 1340px) {
		body {
			min-width: 1340px;
		}
		.goods {
			width: 1000px;
		}
		.search-box {
			right: 0;
			width: 100%;
		}
	}

	@media (min-width: 1700px) {
		body {
			min-width: 1470px;
		}
		.goods {
			width: 1200px;
		}
	}
</style>
